<div class="alert alert-warning alert-group" style="width: 570px;">
  <div class="form-inline">
    <!-- [ngModel]="htmCondition" -->
    <select (change)="onSelectChanged($event)">
      <option value="default">Please select a condition:</option>
      <option *ngFor="let con of conditions" [value]="con.id">{{con.title}}</option>
    </select>
  </div>

  <div class="group-conditions">
    <div class="condition" *ngFor="let item of items; let itemIdx = index">
      <!-- ng-switch-default="ng-switch-default" [ngModel]="con_compose" -->
      <div>
        <div class="form-inline">
          <select *ngIf="itemIdx != 0" (change)="onComposeChanged($event, itemIdx)" class="form-control input-sm">
            <option value="and">And</option>
            <option value="or">Or</option>
          </select>

          <label *ngIf="itemIdx == 0">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
          <label>{{item.title}}</label>
          <select *ngIf="item.condition == 'range'" style="margin-left: 5px;" (change)="onOperatorChanged($event, itemIdx)" class="form-control input-sm">
            <option value="<"><</option>
            <option value="=">=</option>
            <option value=">">></option>
          </select>

          <input type="text" *ngIf="item.condition == 'range'" style="margin-left: 5px;" (change)="onInputValueChanged($event, itemIdx)" class="form-control input-sm">
          <button style="margin-left: 5px;" (click)="removeItem(itemIdx)" class="btn btn-sm btn-danger"><span class="glyphicon glyphicon-minus-sign"></span></button>
        </div>
      </div>
    </div>
  </div>
</div>
